<!--
* @description 报单填报
* @fileName reportFill.vue
* @author zero_fsc
* @date 2020/05/23 02:22:43
!-->
<template>
  <div class="yl-container">
    <div class="yl-card-list">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div slot="header" class="clearfix">
            <el-page-header @back="$router.back()" content="上级项目信息" />
          </div>
        </div>
        <YlForm
          :formConfig="formConfig"
        />
      </el-card>
    </div>
    <!-- 报单填写 -->
    <div class="yl-card-list">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>报单填写</span>
        </div>
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          class="yl-form-item-inline__content"
          label-width="auto"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="报单类型" prop="category_id">
                <el-select v-model="form.category_id" placeholder="请选择报单类型" clearable filterable @change="getCategoryKind">
                  <el-option
                    v-for="(item, index) in cateOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="申报人" prop="uploader_id">
                <el-select v-model="form.uploader_id" placeholder="请选择申报人" clearable filterable>
                  <el-option
                    v-for="(item, index) in uploadOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="报单编号" prop="category_num">
                <el-input v-model="form.category_num" placeholder="请输入报单编号" clearable :disabled="categoryDis" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="发生金额" prop="amount_money">
                <el-input v-model="form.amount_money" placeholder="请输入发生金额" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="经办人" prop="operator">
                <el-input v-model="form.operator" placeholder="请输入经办人" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="实际金额" prop="actual_amount_money">
                <el-input v-model="form.actual_amount_money" placeholder="请输入实际金额" clearable :disabled="actualDis" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="经办时间" prop="occurrence_time">
                <el-date-picker
                  v-model="form.occurrence_time"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="摘要" prop="summary">
                <el-input
                  type="textarea"
                  :rows="8"
                  v-model="form.summary"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class="yl-form-btn-list" style="margin: 0; text-align: center">
            <YlButton uiType="default" @click="submitBill" :loading="isBtnLoading">提 交</YlButton>
            <YlButton uiType="default" btnType="info" @click="$router.back()">取 消</YlButton>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { initSelectValue } from '@/middleware'
import { deepClone } from '@/utils'
export default {
  data () {
    return {
      isBtnLoading: false,
      mx_id: this.$route.params.mx_id,
      stage_id: this.$route.params.stage_id,
      formConfig: {
        class: 'yl-form-item-inline__content',
        isFormList: true,
        formData: {
          code: '',
          name: '',
          kind: '',
          department: '',
          uploader_name: '',
          budget_money: '',
          used_money: '',
          not_used_money: ''
        },
        columns: [
          {
            type: 'input',
            label: '项目编号',
            prop: 'code',
            spanWidth: 8,
            disabled: true
          },
          {
            spanWidth: 8
          },
          {
            type: 'input',
            label: '项目名称',
            prop: 'name',
            spanWidth: 8,
            disabled: true
          },
          {
            type: 'select',
            label: '项目类型',
            prop: 'kind',
            spanWidth: 8,
            disabled: true,
            options: [
              { value: 1, label: '行政' },
              { value: 2, label: '公共' }
            ]
          },
          {
            spanWidth: 8
          },
          {
            type: 'input',
            label: '系别',
            prop: 'department',
            spanWidth: 8,
            disabled: true
          },
          {
            type: 'input',
            label: '申报人',
            prop: 'uploader_name',
            spanWidth: 8,
            disabled: true
          },
          {
            spanWidth: 8
          },
          {
            type: 'input',
            label: '预算金额',
            prop: 'budget_money',
            spanWidth: 8,
            disabled: true
          },
          {
            type: 'input',
            label: '已申报金额',
            prop: 'used_money',
            spanWidth: 8,
            disabled: true
          },
          {
            spanWidth: 8
          },
          {
            type: 'input',
            label: '可申报金额',
            prop: 'not_used_money',
            spanWidth: 8,
            disabled: true
          }
        ]
      },
      // 报单填写
      form: {
        category_id: '',
        uploader_id: '',
        category_num: '',
        amount_money: '',
        operator: '',
        actual_amount_money: '',
        occurrence_time: '',
        summary: ''
      },
      rules: {
        category_id: [
          { required: true, message: '请选择报单类型', trigger: 'change' }
        ],
        uploader_id: [
          { required: true, message: '请选择申报人', trigger: 'change' }
        ],
        category_num: [
          { required: false, message: '请输入报单编号', trigger: 'blur' }
        ],
        amount_money: [
          { required: true, message: '请输入发生金额', trigger: 'blur' }
        ],
        operator: [
          { required: true, message: '请输入经办人', trigger: 'blur' }
        ],
        actual_amount_money: [
          { required: false, message: '请输入实际金额', trigger: 'blur' }
        ],
        occurrence_time: [
          { required: true, message: '请选择经办时间', trigger: 'change' }
        ],
        summary: [
          { required: true, message: '请输入摘要', trigger: 'blur' }
        ]
      },
      cateOptions: [],
      uploadOptions: [],

      // 报单类型数组
      billArr: [],
      // 报单编号disabled
      categoryDis: false,
      // 实际金额disabled
      actualDis: false
    }
  },
  created () {
    this.initData()
  },

  methods: {
    // 初始化数据
    initData () {
      this.getFatherPrjInfo()
      this.getBillCategoryList()
      this.getUploadList()
    },

    // 获取上级项目信息
    async getFatherPrjInfo () {
      let data = await this.$ylapi.getBillFatherPrjInfo({
        mx_id: this.mx_id
      })
      this.formConfig.formData = this.assignForm(this.formConfig.formData, data)
    },

    // 获取报单类型下拉框
    async getBillCategoryList () {
      let data = await this.$ylapi.getBillCategoryList({
        stage_id: this.stage_id,
        mode: 'bill'
      })
      this.billArr = deepClone(data)
      this.cateOptions = initSelectValue(data, 'nns_id', 'nns_name')
    },

    // 获取申报人列表
    async getUploadList () {
      let data = await this.$ylapi.getUploadList()
      for (let i in data) {
        this.uploadOptions.push({
          value: data[i].nns_account,
          label: data[i].nns_department + '-' + data[i].nns_name
        })
      }
    },

    // 获取相应信息
    getCategoryKind (val) {
      this.rules.category_num[0].required = false
      this.rules.actual_amount_money[0].required = false
      this.billArr.forEach(item => {
        if (item.nns_id === val) {
          let { nns_is_special, nns_is_need_return, nns_is_auto_increment } = item
          if (nns_is_auto_increment === 1) {
            this.categoryDis = true
          } else {
            this.categoryDis = false
            this.rules.category_num[0].required = true
          }
          if (nns_is_need_return === 1 && nns_is_special === 0) {
            this.actualDis = true
          } else {
            this.actualDis = false
            this.rules.actual_amount_money[0].required = true
          }
        }
      })
    },

    // 提交报单
    submitBill () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.isBtnLoading = true
          this.$ylapi.addNewBudgetWrite({
            stage_id: this.stage_id,
            mx_id: this.mx_id,
            ...this.form
          }).then(res => {
            this.$modal.success(this, '操作成功' || res)
            this.isBtnLoading = false
            this.$router.back()
          })
            .catch(() => {
              this.isBtnLoading = false
            })
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
  .yl-card-list {
    margin-bottom: 20px;
  }
</style>
